<template>
  <el-date-picker
    :ref="refName"
    v-model="date"
    type="month"
    placeholder="选择月"
    :editable="false"
    :clearable="false"
    @change="setMonth"
  />
</template>

<script>
export default {
  props: {
    refName: {
      type: String,
      default: 'ref'
    }
  },
  data() {
    return {
      date: new Date()
    }
  },
  mounted() {
    const keyNode = this.$refs[this.refName].$el
    const iNode = document.createElement('i')
    iNode.setAttribute('class', 'el-icon-caret-bottom')
    keyNode.appendChild(iNode)
    iNode.style.position = 'absolute'
    iNode.style.top = '6px'
    iNode.style.right = '8px'
    iNode.style.color = '#FFFFFF'
  },
  methods: {
    setMonth(date) {
      this.$emit('getMonth', {
        ref: this.refName,
        date: this.formatDate(date)
      })
    },
    formatDate(date) {
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      return year.toString() + month.toString()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-input {
  width: 96px !important;

  &::v-deep .el-input__inner {
    padding-left: 12px;
    padding-right: 0;
    height: 28px;
    background: #2087d0;
    border-radius: 4px;
    color: #fff;
  }

  &::v-deep .el-input__prefix {
    display: none;
  }

  .el-range-input .el-input__icon {
    right: 30px !important;
  }
}
</style>
